<template>
    <div class="container" v-loading="isLoading">
      <el-card :key="isKey">
        <el-table :data="tableData" border>
          <el-table-column prop="report_content" label="标题" show-overflow-tooltip />
          <el-table-column prop="user_real_name" label="发布人姓名" />
          <el-table-column prop="user_phone" label="手机号" />
          <el-table-column prop="report_wg" label="事发地网格" />
          <el-table-column prop="report_addr" label="地址" />
          <el-table-column prop="create_time" label="创建时间" />
          <el-table-column prop="status" label="工单状态" />
            
          <el-table-column label="操作" width="180px" align="center">
            <template slot-scope="{ row }">
              <el-button 
                type="text"
                @click="openEditDialog(row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <footer class="footer">
        <el-pagination
          background
          layout="total, sizes, pager, jumper"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="searchForm.per_page"
          :total="tableTotal"
          @size-change="changeSize"
          @current-change="changeCurrent"
        />
      </footer>
  
      
  
      <el-dialog
        title="查看详情"
        :visible.sync="showAddOrEdit"
        width="1200px"
        @closed="() => $refs['builingForm'].resetFields()"
      >
        <el-form
          :model="builingForm"
          ref="builingForm"
          label-width="7em"
        >
          <el-form-item prop="$id" hidden />
          <el-form-item class="span-2" label="标题" prop="report_content">
            <el-input readonly
              v-model="builingForm.report_content"
              placeholder="标题"
            ></el-input>
          </el-form-item>

          <el-form-item class="span-2" label="发布人姓名" prop="user_real_name">
            <el-input readonly
              v-model="builingForm.user_real_name"
              placeholder="发布人姓名"
            ></el-input>
          </el-form-item>
  
          <el-form-item class="span-2" label="手机号" prop="user_phone">
            <el-input readonly
              v-model="builingForm.user_phone"
              placeholder="手机号"
            ></el-input>
          </el-form-item>
  
          <el-form-item class="span-2" label="事发地网格" prop="report_wg">
            <el-input readonly
              :value="builingForm.report_wg"
              placeholder="事发地网格"
            ></el-input>
          </el-form-item>

          <el-form-item class="span-2" label="地址" prop="report_addr">
            <el-input readonly
              :value="builingForm.report_addr"
              placeholder="地址"
            ></el-input>
          </el-form-item>
  
          <el-form-item class="span-2" label="创建时间" prop="create_time">
            <el-input readonly
              v-model="builingForm.create_time"
              placeholder="创建时间"
            ></el-input>
          </el-form-item>
        
  
          <el-form-item class="span-2" label="工单状态" prop="status">
            <el-input readonly
              v-model="builingForm.status"
              placeholder="工单状态"
            ></el-input>
          </el-form-item>
          
        </el-form>
  
        <template #footer v-if="builingForm.$status !== 2">
          <el-button type="primary" @click="closeDialog()"
            >关闭</el-button
          >
        </template>
      </el-dialog>
  
      <el-dialog
        title="分发工单"
        :visible.sync="showOrder"
        @closed="closeOrder()"
      >
  
        <el-transfer
          :titles="['人员列表', '选中人员']"
          :button-texts="['取消', '选中']"
          v-model="adminsForm.checkedAdmin"
          :data="adminsForm.admins">
          <el-button class="transfer-footer" slot="right-footer"  size="small" @click="orderOut()">分发</el-button>
        </el-transfer>
        <template #footer v-if="builingForm.$status !== 2">
          <el-button type="primary" @click="closeOrder()"
            >关闭</el-button
          >
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { table, addOrEdit, status } from "@/utils/mixins";
  import Upload from "@/components/Upload/SingleImage.vue";
  import API from "@/api";
  import _ from "lodash";
  export default {
    mixins: [table, addOrEdit, status],
    components: {
      Upload,
    },
    data: () => ({
      isLoading:true,
      showOrder:false,// 分发工单
      showAddOrEdit:false,//查看详情弹窗
      showAddOrSovle:false,//处理弹窗
  
      fullscreenLoading: false,//全局loading
      typeList: [],
      typeForm:[],
      tableData:[],
      searchForm:{
        typeid:'',//类别id
        page:1,
        per_page:10,
      },
      builingForm: {
        report_content:"",//实名信息
        user_real_name:'',//手机号
        user_phone:"",//用户地址
        report_wg:"",
        report_addr:"",//随手拍类型
        create_time:'',
        status:"",
      },
      status: [
        { label: "未分配", value: 0 },
        { label: "处理中", value: 1 },
        { label: '已处理', value: 2 },
        { label: "不予受理", value: 3 },
      ],
      adminsForm:{
        $id:'',
        admins:[],
        checkedAdmin:[]
      },
      statusText: ["未分配","处理中",'已处理','不予处理'],
    }),
  
    created() {
      this.getList()
    },
  
    methods: {
      // 获取随手拍列表
      getList(){
        this.isLoading=true
        this.tableData=[
        {report_content:"20230413洋安荷映路八佰伴广场有演出声音太大",user_real_name:"童黎霞",user_phone:"15906697140",report_wg:"建德市/洋溪街道/洋安社区/和颂苑网格",report_addr:"杭州市建德市荷映路113正西方向120米停车场西南约97米",create_time:"2023/4/13 14:39:57",status:"办结"},
        {report_content:"20230406新安悦府3幢的郑某某有点击疑似诈骗链接现象",user_real_name:"谢鸿山",user_phone:"13575769215",report_wg:"洋溪街道/洋安社区/新安悦府网格",report_addr:"浙江省杭州市建德市洋溪街道南一路洋安幼儿园",create_time:"2023/4/6 8:11:58",status:"办结"},
        {report_content:"20230302金塘北苑11栋门前道板破损",user_real_name:"章翠英",user_phone:"13588469634",report_wg:"洋溪街道/洋安社区/金塘北苑网格",report_addr:"杭州市建德市浙江省杭州市建德市洋溪街道金塘小区11幢",create_time:"2023/3/2 9:16:21",status:"办结"},
        ]
        this.tableTotal=3
        this.isLoading=false
      },
  
      // 分页
      changeSize(val){
        this.searchForm.per_page = val
        this.searchForm.page = 1
        this.getList()
      },
  
      // 分页
      changeCurrent(val){
        this.searchForm.page = val
        this.getList()
      },
  
      // 处理工单详情
      solve(id){
        let _that=this
        let loadingInstance=this.$loading({ fullscreen: true })
        loadingInstance.close()
        API.getPhotographInfo(id).then(({data})=>{
          _that.builingForm.$id=data.id
  
          _that.builingForm.user_real_name=data.user_real_name
          _that.builingForm.user_phone=data.user_phone
  
          _that.builingForm.create_time=data.create_time
          _that.builingForm.report_type_name=data.report_type_name
          _that.builingForm.user_addr_info=data.user_subdistrict_name+""+data.user_addr_info
  
          _that.builingForm.report_content=data.report_content
          _that.builingForm.report_addr=data.report_addr
          _that.builingForm.report_content=data.report_content
          _that.builingForm.status=parseInt(data.status)
          _that.builingForm.report_imgs=data.report_imgs
  
          _that.builingForm.admin_user_avatar_url=data.admin_user_avatar_url
          _that.builingForm.admin_user_name=data.admin_user_name
  
          _that.builingForm.repair_content=data.repair_content
          _that.builingForm.repair_imgs=data.repair_imgs
          _that.builingForm.repair_time=data.repair_time
  
        })
        .catch()
        .finally(()=>{
          this.showAddOrSovle=true
          loadingInstance.close()
        })
      },
  
      solveOrder(id){
        let data={
          status:this.builingForm.status,
          repair_content:this.builingForm.repair_content,
        }
        API.solvePhotograph(id,data).then(()=>{
          this.$message.success("工单处理成功！");
          this.restForm()
          this.showAddOrSovle=false
          this.getList();
        })
      },
  
      // 查看工单详情详情
      openEditDialog(data){
        let _that=this
        let loadingInstance=this.$loading({ fullscreen: true })
        _that.builingForm.report_content=data.report_content
        _that.builingForm.user_real_name=data.user_real_name
        _that.builingForm.user_phone=data.user_phone
        _that.builingForm.report_wg=data.report_wg
        _that.builingForm.report_addr=data.report_addr
        _that.builingForm.create_time=data.create_time
        _that.builingForm.status=data.status
        this.showAddOrEdit=true
        loadingInstance.close()
      },
  
      // 关闭弹窗
      closeDialog(){
        this.restForm()
        this.showAddOrEdit=false
      },
  
      restForm(){
        let _that=this
        _that.builingForm.$id=""
        _that.builingForm.user_real_name=""
        _that.builingForm.user_phone=""
        _that.builingForm.user_addr_info=""
        _that.builingForm.create_time=""
        _that.builingForm.report_type_name=""
        _that.builingForm.report_addr=""
        _that.builingForm.status=""
        _that.builingForm.report_content=""
        _that.builingForm.report_imgs=[]
        _that.builingForm.repair_time=""
        _that.builingForm.admin_user_avatar_url=""
        _that.builingForm.admin_user_name=""
        _that.builingForm.repair_content=""
        _that.builingForm.repair_imgs=[]
      },
  
      // 分发工单
      giveOrder(id){
        this.adminsForm.$id=id
        this.showOrder=true
      },
  
      // 工单分发
      orderOut(){
        let report_id=this.adminsForm.$id
        let admin_user_id=this.adminsForm.checkedAdmin
        if(admin_user_id.length==0){
          this.$message.error('请选择分发的管理员');
        }else if(admin_user_id.length>1){
          this.$message.error('工单只能分发给一个人哦');
        }else{
            this.$confirm(`确定要分发该工单吗？`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
              .then(() => API.givePhotograph({report_id:report_id,admin_user_id:admin_user_id[0]}))
              .then(() => {
                this.getType();
                this.$notify({
                  title: "成功",
                  message: `分发成功`,
                  type: "success",
                });
              })
              .catch(({ code }) => {
                if (code === 11100) {
                  this.$message({
                    iconClass: " ",
                    message: "分发失败",
                  });
                }
              });
            }
      },
  
      // 关闭工单弹窗
      closeOrder(){
        this.adminsForm.checkedAdmin=[]
        this.showOrder=false
      }

    },
  };
  </script>
  
  <style lang="scss" scoped>
  .container {
    .tool_add {
      font-size: 20px;
      margin-left: 10px;
      transform: translateY(10%);
    }
  }
  .adminUserInfo{
    display:flex;
    align-items: center;
    .adminAvator{
      width:40px;
      height:40px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.4);
    }
    .blue{
      font-size:18px;
      margin-left: 12px;
      margin-right: 12px;
    }
  }
  
  ::v-deep{
    .el-dialog{
      margin-top:2vh !important;
    }
  }
  </style>
  